<template>
  <div class="main-area">
    <div class="search-area">
      <Form :model="searchObject" :label-width="80" label-position="left">
      <Row :gutter="16" type="flex" justify="space-between">
          <Col span="8">
            <FormItem label="路由名称:">
                <Input search v-model="searchName" placeholder="请输入路由名称"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <Button type="primary" shape="circle" icon="ios-search" @click="handleSearch">查询</Button>
            <Button shape="circle" icon="ios-refresh-circle-outline" @click="handleReset">重置</Button>
          </Col>
      </Row>
      </Form>
    </div>
    <TChild :tableData="dataList" :columns="columns" />
  </div>
</template>

<script>
import TChild from '@/components/TableChild';
import { routerList } from '@/request/api.js';
import TableMinix from '@/utils/tableMinix.js';
const dataLabel = [
  { title: '名称', slot: 'name', tree: true },
  { title: '路径', key: 'path' },
  { title: '图标', slot: 'icon' },
  {
    title: 'Action',
    key: 'action',
    width: 150,
    align: 'center',
    render: (h, params) => {
      return h('div', [
        h('Button', {
          props: {
            type: 'primary',
            size: 'small'
          },
          style: {
            marginRight: '5px'
          },
          on: {
            click: () => {
              window.show(params.index);
            }
          }
        }, '详情'),
        h('Button', {
          props: {
            type: 'error',
            size: 'small'
          },
          on: {
            click: () => {
              window.remove(params.index);
            }
          }
        }, 'Delete')
      ]);
    }
  }
];
export default {
  data() {
    return {
      dataList: [],
      columns: dataLabel,
      searchName: ''
    };
  },
  mixins:[TableMinix],
  components: {
    TChild
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      routerList(this.searchObject).then((res) => {
        console.log('list:', res);
        this.dataList = res;
      });
    },
    handleSearch() {
      this.searchObject.name = this.searchName;
      this.getList();
    },
    handleReset() {
      delete this.searchObject.name;
      this.searchName = '';
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
.ivu-form-item{
  margin: 0;
}
</style>
